<template>
	<view class="height-screen relative">
		<image src="@/static/img/pullNewImg.png" style="height: 100vh;width: 100vw;" class="absolute" />
		<cu-custom>
			<block slot="content">
				<text class="text-white">拉新注册二维码</text>
			</block>
		</cu-custom>
		<view class="margin-ht bg-white padding radius-sm" style="margin-top: 70%;">
			<u-form labelPosition="top" labelWidth="90">
				<u-form-item :label="$t('login.account')" borderBottom>
					<u-input v-model="mobile" border="none" :placeholder="$t('login.placeholderAccount')"></u-input>
				</u-form-item>
				<u-form-item :label="$t('login.code')" borderBottom>
					<u-input :placeholder="$t('login.placeholderCode')" border="none" clearable v-model="captcha"
						type="number">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60"
								:changeText="$t('login.codeChangeText')"></u-code>
							<view class="setButton" @tap.stop="getCode"
								style="width: 240rpx;height: 55rpx;background: rgba(6, 193, 104, 0.1);border-radius: 28rpx;">
								<text style="color: #06C168;" class="font-400 text-df">{{tips}}</text>
							</view>
						</template>
					</u-input>
				</u-form-item>
				<view class="setButton"
					style="height: 90rpx;background: #06C168;border-radius: 40rpx;margin-top: 60rpx;"
					@tap.stop="mobilelogin">
					<text class="font-400 text-df text-white">{{$t('filed.register')}}</text>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		mobilelogin,
		sendSms
	} from '@/apis'
	export default {
		data() {
			return {
				mobile: '',
				captcha: '',
				tips: this.$t('login.getCode'),
				pid: ''
			}
		},
		onLoad(options) {
			this.pid = options.pid
		},
		methods: {
			async mobilelogin() {
				const res = await mobilelogin({
					mobile: '61' + this.mobile,
					captcha: this.captcha,
					pid: this.pid
				})
				this.helper.showToast(this.$t('message.success'))
			},
			async getCode() {
				if (this.mobile) {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: this.$t('login.sendCode')
						})
						const res = await sendSms({
							mobile: '61' + this.mobile,
						})
						setTimeout(async () => {
							uni.hideLoading();
							uni.$u.toast(this.$t('message.success'));
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast(this.$t('login.waitCode'));
					}
				} else {
					this.helper.showToast(this.$t('login.placeholderAccount'))
				}
			},
			codeChange(text) {
				this.tips = text;
			},
		}
	}
</script>
<style lang="scss" scoped>
	/deep/ .u-form-item:nth-child(2) {
		margin-top: 40rpx !important;
	}

	/deep/ .u-form-item__body__left {
		margin-bottom: 20rpx !important;
	}
</style>